<template>
  <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(banner,index) in banners" :key="index">
        <img v-show="banner.src" :src="banner.src">
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import { swiper,swiperWrapper, swiperSlide } from 'vue-awesome-swiper'

export default {
  data () {
    return {
      banners: [{ src: require('../../assets/bannerBox/slider1-1.png') }, 
      					{ src: require('../../assets/bannerBox/slider1-2.png') },
      					{ src: require('../../assets/bannerBox/slider1-1.png') }
      				 ],
      swiperOption: {
        notNextTick: true,
        autoplay: 1000,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true,
        onSlideChangeEnd: swiper => {
          this.page = swiper.realIndex + 1
          this.index = swiper.realIndex
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.swiper-container{
  overflow: hidden;
}
.swiper-wrapper {
  /*margin-top: 10px;*/
  height: 100%;
  width: 300%;
  overflow: hidden;
}
.swiper-slide{
  float: left;
}

.swiper-wrapper img {
  width: 100%;
  height: 100%;
}
</style>